<!--
 * @Date: 2024-12-18 15:26:16
 * @Author: LiSong
 * @LastEditors: ZHM
 * @LastEditTime: 2025-01-17 10:16:14
 * @Description: 表单管理列表
-->
<template>
  <LayoutFull :enableHeader="false">
    <template #aside>
      <ClassifyTree :="treeAttrs"
        @currentChange="handleTreeChange">
      </ClassifyTree>
    </template>
    <template #main>
      <div class="card_table_panel">
        <div class="seacrch_main">
          <div class="search_left">
            <el-select v-model="tableParams.status"
              placeholder="请选择状态"
              class="mr-12"
              style="width:200px; margin-right: 10px"
              @change="handleSearch">
              <el-option v-for="item in COMMON_STOP_OPEN_ENUMS.options"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
            <el-input v-model="tableParams.keyWords"
              clearable
              style="width: 250px;"
              placeholder="请输入名称/编码"
              @change="handleSearch" />
          </div>
          <div class="search_right">
            <el-button type="primary"
              @click="toolBtnOperate('add')">新建</el-button>
          </div>
        </div>
        <el-scrollbar class="card_table"
          v-loading="fileLoadig"
          v-if="homepageList.length > 0">
          <el-card v-for="item in homepageList"
            :key="item.formId"
            class="card_table_item">
            <img class="card_table_img"
              :src="item.imageStr" />
            <div class="card_content_button">
              <el-button type="primary"
                class="card_content_btn"
                @click.stop="toolBtnOperate('edit',item)">设计</el-button>
            </div>
            <template #footer>
              <div class="card_content_main">
                <el-tooltip placement="top"
                  :content="item.name">
                  <span class="card_content_name"
                    :style="{ color: item.status == '1' ? '' : 'red' }"> {{ item.name }}</span>
                </el-tooltip>
                <div class="card_content_menulist">
                  <el-icon @click="toolBtnOperate('preview',item)">
                    <el-tooltip placement="top"
                      content="预览">
                      <View />
                    </el-tooltip>
                  </el-icon>
                  <el-icon @click="toolBtnOperate('copy',item)">
                    <el-tooltip placement="top"
                      content="复制">
                      <CopyDocument />
                    </el-tooltip>
                  </el-icon>
                  <el-dropdown size="small"
                    placement="bottom">
                    <el-icon>
                      <MoreFilled />
                    </el-icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item :style="{ color: item.status == '1' ? 'red' : '' }"
                          @click="handleOpenStop(item,item.status)">{{ item.status == '1' ? '停用' : '启用' }}</el-dropdown-item>
                        <el-dropdown-item style="color: red"
                          @click="handleDelete(item)">删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-card>
        </el-scrollbar>
        <el-empty v-else
          description="暂无数据"
          v-loading="fileLoadig"
          style="height:calc(100% - 100px)" />
      </div>
    </template>
    <HpDesignDrawer ref="hpDesignRef"
      @success="handleSearch" />
    <HpPreviewDrawer ref="hpPreviewRef" />
  </LayoutFull>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { RKUtils, XEUtils } from '/@/utils';
import { HpDesignDrawer, HpPreviewDrawer } from '@hp/drawer'
import { RkConfirmBox } from '@/components/message-box/index.js';
import { useFormListApi } from '@/api';
import { COMMON_STOP_OPEN_ENUMS } from '@/enums/enums-common.js';
import { defAxios as request } from '@/utils/http';

// 左侧分类树属性配置
const treeAttrs = reactive({
  title: '主页分类',
  funcType: '3',
  drawerTitle: '主页分类管理',
})

// 树结构数据
const treeStore = reactive({
  activeData: null,
  activeNode: {},
})

/**
 * 树节点变换
 * @param data 选中节点数据
 * @param node 选中节点
 */
const handleTreeChange = (data, node) => {
  treeStore.activeData = data
  treeStore.activeNode = node
  handleSearch()
}

// 表格参数
const tableParams = reactive({
  status: '1',
  formType: undefined,
  keyWords: undefined,
})
/**
 * 工具按钮操作
 * 
 * @param type 类型
 * @param text 操作名称
 */
const toolBtnOperate = (type, item) => {
  switch (type) {
    case 'add':
      handleAdd()
      break;
    case 'edit':
      handleEdit(item)
      break;
    case 'preview':
      handlePreview(item)
      break;
    case 'copy':
      handleCopy(item)
      break;
    default:
      break;
  }
}

/**查询列表方法*/
const queryPrdFormInfo = (params) => {
  return request({
    url: '/prdFormInfo/queryPrdFormInfoList',
    method: 'POST',
    data: params,
  });
}
// 加载状态
const fileLoadig = ref(false);
//列表数据
let homepageList = ref([]);
/**查询 */
const handleSearch = async () => {
  fileLoadig.value = true;
  const { activeData } = treeStore
  if (!activeData) return
  tableParams['formType'] = activeData.code
  //获取列表数据
  const result = await queryPrdFormInfo(tableParams);
  const { code, msg, data } = result;
  if (code == 200) {
    homepageList.value = XEUtils.clone(data, true)
    fileLoadig.value = false;
  } else {
    console.err(msg)
    homepageList.value = []
    fileLoadig.value = false;
  }
}

//设计抽屉的Ref
const hpDesignRef = ref()
//预览抽屉的Ref
const hpPreviewRef = ref()
/**
 * 新增
 */
const handleAdd = () => {
  const { activeData } = treeStore
  if (activeData && activeData.children && activeData.children.length) {
    ElMessage.warning('请选择一个底级节点再进行操作！')
    return
  }
  hpDesignRef.value.handleAdd({
    formType: activeData.code,
    formTypeName: activeData.name
  })
}
/**
 * 修改
 */
const handleEdit = (item) => {
  hpDesignRef.value.handleEdit({
    formId: item.formId,
    code: item.code,
    formType: item.formType,
    formTypeName: item.formTypeName
  })
}
/**
 * 预览
 */
const handlePreview = (item) => {
  hpPreviewRef.value.handleOpen(item)
}
/**
 * 删除
 */
const handleDelete = (item) => {
  RkConfirmBox({
    title: '提示',
    content: `您确定要删除吗？`,
    onSubmit: async () => {
      const params = {
        status: 0,
        formIds: item.formId,
      }
      const result = await useFormListApi().delPrdFormInfo(params)
      const { code, msg } = result;
      if (code === 200) {
        ElMessage.success('删除成功！')
        handleSearch()
      } else {
        ElMessage.error(msg)
      }
    },
    onCancel: () => { },
  })
}
/** 启用停用操作 */
const handleOpenStop = (item, statusCode) => {
  let name = '';
  let status = 0;
  if (statusCode == '1') {
    name = '停用'
    status = 0
  } else {
    name = '启用'
    status = 1
  }
  RkConfirmBox({
    title: '提示',
    content: `您确定要${name}吗？`,
    onSubmit: async () => {
      const params = {
        status,
        formIds: item.formId,
      }
      const result = await useFormListApi().updateStatus(params)
      const { code, msg } = result;
      if (code === 200) {
        ElMessage.success(`${name}成功！`)
        handleSearch()
      } else {
        ElMessage.error(msg)
      }
    },
    onCancel: () => { },
  })
}

/**
 * 复制操作
 * 
 * @param param 参数 { formId, name }
 */
const handleCopy = async ({ formId, name }) => {
  try {
    const result = await useFormListApi().copyPrdFormInfo({ formId })
    const { code, msg } = result;
    if (code === 200) {
      ElMessage.success(`复制[${name}]成功！`)
      handleSearch()
    } else {
      ElMessage.error(msg)
    }
  } catch (error) {
    console.error('复制失败！', error)
  }
}

</script>

<style lang="scss" scoped>
.card_table_panel {
	width: 100%;
	height: 100%;
	padding: 10px;
	position: relative;
	.seacrch_main {
		display: flex;
		justify-content: space-between;
	}
	.card_table {
		padding: 10px 0;
		width: 100%;
		height: calc(100% - 40px);
	}
	.card_table_item {
		position: relative;
		width: 260px;
		height: 200px;
		border-radius: 4px;
		padding-bottom: 40px;
		margin: 0 15px 15px 0;
	}
	.card_table_img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}
	.card_content_button {
		position: absolute;
		height: 158px;
		width: 100%;
		background-color: transparent;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.card_content_btn {
			display: none;
		}
	}
	.card_content_main {
		font-size: 14px;
		width: 100%;
		height: 36px;
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
		justify-content: space-between;
		padding: 0 8px;
		.card_content_name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.card_content_menulist {
		display: flex;
		.el-icon {
			cursor: pointer;
			margin-right: 10px;
		}
		.el-icon:focus {
			outline: unset;
		}
	}
	.card_pagination {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 48px;
		padding-top: 10px;
		padding-right: 8px;
		background: #fff;
	}
}
</style>
<style lang="scss">
.card_table_panel {
	.el-card__body {
		padding: 5px;
		height: 100%;
		width: 100%;
		cursor: pointer;
	}
	.el-card__body:hover .card_content_btn {
		display: block;
	}
	.el-card__footer {
		padding: 0px;
	}
	.el-tooltip__trigger:focus {
		outline: none;
	}
	.el-scrollbar__view {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
}
</style>